<template>
    <div class="top_head">
        <section>
            <h1>叩丁狼电商运营平台</h1>
            <el-icon>
                <Menu />
            </el-icon>
        </section>
        <!-- 下拉菜单 -->
        <el-dropdown @command="commandHandle">
            <span class="el-dropdown-link">
                用户名
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="home">首页</el-dropdown-item>
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import { ArrowDown, Menu } from '@element-plus/icons-vue'
import { userStore } from '@/store';
import { useRouter } from 'vue-router';
const useStore = userStore()
const router = useRouter()

const commandHandle = (cmd: string) => {
    switch (cmd) {
        case "home": router.push("/index"); break;
        case "logout":
            // 删除token
            localStorage.removeItem("token");
            // 返回login登录页面
            router.push("/login");
            // 删除路由
            // 得到 pinia 里面的 一级菜单数组，数组里面的对象的 name 属性就是 对应的 路由的name
            useStore.menusAll.forEach((item) => {
                router.removeRoute(item.name);
            });
            // setTimeout(() => {
            //     console.log(router.getRoutes());
            // }, 2000);
            router.removeRoute("home");
            // 删除pinia里面的数据
            useStore.menus = [];
            break;
    }
}
</script>

<style lang="less" scoped>
.top_head {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    section {
        display: flex;
        justify-content: space-between;
        align-items: center;

        h1 {
            font-size: 24px;
            margin-right: 10px;
        }

        .el-icon {
            font-size: 22px;
        }
    }

        .el-dropdown-link {
        font-size: 16px;
        font-weight: bold;
        color: white;
    }

}
</style>